<!-- benchmark-template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fibonacci Benchmark Analysis</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
            margin: 0; padding: 20px; background: #f5f7fa; 
        }
        .container { max-width: 1400px; margin: 0 auto; }
        .header { 
            background: white; padding: 30px; border-radius: 10px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; 
            text-align: center;
        }
        .card { 
            background: white; padding: 20px; border-radius: 10px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; 
        }
        .chart-container { height: 400px; margin: 20px 0; position: relative; }
        .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
        .metrics-grid { 
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
            gap: 15px; margin: 20px 0; 
        }
        .metric { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            color: white; padding: 20px; border-radius: 8px; text-align: center; 
        }
        .metric-value { font-size: 24px; font-weight: bold; margin-bottom: 5px; }
        .metric-label { opacity: 0.9; font-size: 12px; }
        .table-container { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        th, td { padding: 8px; text-align: right; border-bottom: 1px solid #eee; }
        th { background: #f8f9fa; font-weight: 600; position: sticky; top: 0; }
        .algorithm-name { text-align: left !important; font-weight: 500; }
        .best-value { background: #d4edda; color: #155724; font-weight: bold; }
        .worst-value { background: #f8d7da; color: #721c24; }
        .loading { text-align: center; padding: 40px; color: #666; }
        .error { background: #f8d7da; color: #721c24; padding: 15px; border-radius: 5px; margin: 20px 0; }
        .analysis { background: #e7f3ff; padding: 20px; border-radius: 5px; margin: 20px 0; }
        .toggle-buttons { margin: 20px 0; text-align: center; }
        .toggle-btn { 
            background: #007bff; color: white; border: none; padding: 10px 20px; 
            border-radius: 5px; margin: 0 5px; cursor: pointer; 
        }
        .toggle-btn.active { background: #28a745; }
        .toggle-btn:hover { opacity: 0.8; }
        .data-files { background: #fff3cd; padding: 15px; border-radius: 5px; margin: 20px 0; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 Fibonacci Algorithm Benchmark Analysis</h1>
            <p>Generated on: <strong id="timestamp"></strong></p>
            <p>Comprehensive performance comparison across algorithms and input sizes</p>
        </div>

        <div class="data-files">
            <strong>📁 Expected data files:</strong>
            <ul>
                <li><code>bench.json</code> - Generated by <code>gobenchdata --json</code></li>
                <li><code>bench_results.txt</code> - Raw benchmark output (optional)</li>
            </ul>
        </div>

        <div id="loading" class="loading">
            <p>Loading and analyzing benchmark data...</p>
        </div>

        <div id="error" class="error" style="display: none;">
            <strong>Error:</strong> <span id="error-message"></span>
        </div>

        <div id="content" style="display: none;">
            <!-- 总体指标 -->
            <div class="metrics-grid" id="metrics"></div>

            <!-- 分析结果 -->
            <div class="card">
                <h2>📊 Key Insights</h2>
                <div id="analysis" class="analysis"></div>
            </div>

            <!-- 图表切换按钮 -->
            <div class="toggle-buttons">
                <button class="toggle-btn active" onclick="showChart('horizontal')">横向对比 (算法 vs 输入大小)</button>
                <button class="toggle-btn" onclick="showChart('vertical')">纵向对比 (输入大小 vs 算法)</button>
                <button class="toggle-btn" onclick="showChart('efficiency')">效率分析</button>
                <button class="toggle-btn" onclick="showChart('scalability')">扩展性分析</button>
            </div>

            <!-- 图表区域 -->
            <div id="chart-horizontal" class="chart-section">
                <div class="chart-row">
                    <div class="card">
                        <h3>⏱️ 执行时间对比 (横向)</h3>
                        <div class="chart-container">
                            <canvas id="timeHorizontalChart"></canvas>
                        </div>
                    </div>
                    <div class="card">
                        <h3>💾 内存使用对比 (横向)</h3>
                        <div class="chart-container">
                            <canvas id="memoryHorizontalChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div id="chart-vertical" class="chart-section" style="display: none;">
                <div class="chart-row">
                    <div class="card">
                        <h3>📈 时间复杂度对比 (纵向)</h3>
                        <div class="chart-container">
                            <canvas id="timeVerticalChart"></canvas>
                        </div>
                    </div>
                    <div class="card">
                        <h3>📊 内存效率对比 (纵向)</h3>
                        <div class="chart-container">
                            <canvas id="memoryVerticalChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div id="chart-efficiency" class="chart-section" style="display: none;">
                <div class="card">
                    <h3>⚡ 效率矩阵 (时间 vs 内存)</h3>
                    <div class="chart-container">
                        <canvas id="efficiencyChart"></canvas>
                    </div>
                </div>
            </div>

            <div id="chart-scalability" class="chart-section" style="display: none;">
                <div class="card">
                    <h3>📈 扩展性分析</h3>
                    <div class="chart-container">
                        <canvas id="scalabilityChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 详细数据表格 -->
            <div class="card">
                <h2>📋 详细对比表格</h2>
                <div class="table-container">
                    <h3>⏱️ 执行时间 (ns/op)</h3>
                    <table id="timeTable"></table>
                </div>
                <div class="table-container">
                    <h3>💾 内存使用 (B/op)</h3>
                    <table id="memoryTable"></table>
                </div>
                <div class="table-container">
                    <h3>🔄 内存分配次数 (allocs/op)</h3>
                    <table id="allocsTable"></table>
                </div>
            </div>

            <!-- 原始数据 -->
            <div class="card">
                <h2>📄 Raw Data</h2>
                <details>
                    <summary>Click to view JSON data</summary>
                    <pre id="rawData" style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;"></pre>
                </details>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('timestamp').textContent = new Date().toLocaleString();
        
        let benchmarkData = {};
        let chartInstances = {};
        let currentChart = 'horizontal';

        async function loadData() {
            try {
                // 尝试加载 gobenchdata 生成的 JSON 文件
                const response = await fetch('./bench.json');
                if (!response.ok) {
                    throw new Error(`Failed to load bench.json: ${response.status} ${response.statusText}`);
                }
                
                const jsonData = await response.json();
                document.getElementById('rawData').textContent = JSON.stringify(jsonData, null, 2);
                
                benchmarkData = parseGobenchdataJSON(jsonData);
                
                document.getElementById('loading').style.display = 'none';
                document.getElementById('content').style.display = 'block';
                
                createMetrics();
                createAnalysis();
                createAllCharts();
                createTables();
                
            } catch (error) {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('error').style.display = 'block';
                document.getElementById('error-message').textContent = error.message;
                console.error('Error:', error);
            }
        }

        function parseGobenchdataJSON(jsonData) {
            const data = {
                algorithms: {},
                sizes: new Set(),
                algorithmNames: new Set()
            };
            
            // gobenchdata 生成的 JSON 格式
            let benchmarks = [];
            if (Array.isArray(jsonData)) {
                benchmarks = jsonData;
            } else if (jsonData.Benchmarks) {
                benchmarks = jsonData.Benchmarks;
            } else if (jsonData.benchmarks) {
                benchmarks = jsonData.benchmarks;
            }
            
            benchmarks.forEach(bench => {
                // 解析基准测试名称: BenchmarkSuite/Algorithm/n=size
                const nameMatch = bench.Name.match(/Benchmark\w*\/(\w+)\/n=(\d+)/);
                if (!nameMatch) return;
                
                const [, algorithm, sizeStr] = nameMatch;
                const size = parseInt(sizeStr);
                
                if (!data.algorithms[algorithm]) {
                    data.algorithms[algorithm] = {};
                }
                
                data.algorithms[algorithm][size] = {
                    iterations: bench.Iterations || 0,
                    nsPerOp: bench.NsPerOp || 0,
                    bytesPerOp: bench.AllocedBytesPerOp || bench.BytesPerOp || 0,
                    allocsPerOp: bench.AllocsPerOp || 0
                };
                
                data.sizes.add(size);
                data.algorithmNames.add(algorithm);
            });
            
            data.sizes = Array.from(data.sizes).sort((a, b) => a - b);
            data.algorithmNames = Array.from(data.algorithmNames);
            
            return data;
        }

        function createMetrics() {
            const algorithms = benchmarkData.algorithmNames;
            const sizes = benchmarkData.sizes;
            
            if (algorithms.length === 0 || sizes.length === 0) {
                document.getElementById('metrics').innerHTML = '<div class="metric"><div class="metric-value">No Data</div><div class="metric-label">No valid benchmark data found</div></div>';
                return;
            }
            
            // 计算各种指标
            let fastest = { algo: '', value: Infinity };
            let slowest = { algo: '', value: 0 };
            let memEfficient = { algo: '', value: Infinity };
            
            algorithms.forEach(algo => {
                const timeValues = sizes.map(size => {
                    const data = benchmarkData.algorithms[algo][size];
                    return data ? data.nsPerOp : 0;
                }).filter(v => v > 0);
                
                const memValues = sizes.map(size => {
                    const data = benchmarkData.algorithms[algo][size];
                    return data ? data.bytesPerOp : 0;
                });
                
                if (timeValues.length > 0) {
                    const avgTime = timeValues.reduce((a, b) => a + b, 0) / timeValues.length;
                    const avgMem = memValues.reduce((a, b) => a + b, 0) / memValues.length;
                    
                    if (avgTime < fastest.value) {
                        fastest = { algo, value: avgTime };
                    }
                    if (avgTime > slowest.value) {
                        slowest = { algo, value: avgTime };
                    }
                    if (avgMem < memEfficient.value) {
                        memEfficient = { algo, value: avgMem };
                    }
                }
            });

            document.getElementById('metrics').innerHTML = `
                <div class="metric">
                    <div class="metric-value">${algorithms.length}</div>
                    <div class="metric-label">算法数量</div>
                </div>
                <div class="metric">
                    <div class="metric-value">${sizes.length}</div>
                    <div class="metric-label">测试规模</div>
                </div>
                <div class="metric">
                    <div class="metric-value">${fastest.algo || 'N/A'}</div>
                    <div class="metric-label">最快算法<br>${fastest.value !== Infinity ? (fastest.value/1000).toFixed(1) + 'μs' : 'N/A'}</div>
                </div>
                <div class="metric">
                    <div class="metric-value">${memEfficient.algo || 'N/A'}</div>
                    <div class="metric-label">内存最优<br>${memEfficient.value !== Infinity ? memEfficient.value.toFixed(0) + 'B' : 'N/A'}</div>
                </div
<div class="metric">
                    <div class="metric-value">${memEfficient.algo || 'N/A'}</div>
                    <div class="metric-label">内存最优<br>${memEfficient.value !== Infinity ? memEfficient.value.toFixed(0) + 'B' : 'N/A'}</div>
                </div>
                <div class="metric">
                    <div class="metric-value">${fastest.value !== Infinity && slowest.value > 0 ? (slowest.value/fastest.value).toFixed(1) + 'x' : 'N/A'}</div>
                    <div class="metric-label">性能差距</div>
                </div>
            `;
        }

        function createAnalysis() {
            const analysis = document.getElementById('analysis');
            const algorithms = benchmarkData.algorithmNames;
            
            if (algorithms.length === 0) {
                analysis.innerHTML = '<p>No benchmark data available for analysis.</p>';
                return;
            }
            
            analysis.innerHTML = `
                <h4>🔍 性能分析要点：</h4>
                <ul>
                    ${algorithms.includes('Sequential') ? '<li><strong>Sequential</strong>: 最简单但随输入增长呈指数增长，适合小规模计算</li>' : ''}
                    ${algorithms.includes('Parallel') ? '<li><strong>Parallel</strong>: 并行化有开销，小规模时反而比串行慢</li>' : ''}
                    ${algorithms.includes('ParallelWithChannel') ? '<li><strong>ParallelWithChannel</strong>: 通道通信开销大，内存分配多</li>' : ''}
                    ${algorithms.includes('ParallelWithCache') ? '<li><strong>ParallelWithCache</strong>: 缓存优化显著，大规模时表现最佳</li>' : ''}
                    ${algorithms.includes('ParallelDP') ? '<li><strong>ParallelDP</strong>: 动态规划最稳定，内存使用适中</li>' : ''}
                </ul>
                <h4>💡 建议：</h4>
                <ul>
                    <li>小规模 (n≤10): 使用最简单的算法</li>
                    <li>中等规模 (n=10-20): 使用平衡型算法</li>
                    <li>大规模 (n>20): 使用优化型算法</li>
                </ul>
            `;
        }

        function showChart(type) {
            // 隐藏所有图表区域
            document.querySelectorAll('.chart-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // 更新按钮状态
            document.querySelectorAll('.toggle-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 显示对应的图表
            const targetSection = document.getElementById(`chart-${type}`);
            if (targetSection) {
                targetSection.style.display = 'block';
            }
            
            currentChart = type;
        }

        function createAllCharts() {
            createHorizontalCharts();
            createVerticalCharts();
            createEfficiencyChart();
            createScalabilityChart();
        }

        function createHorizontalCharts() {
            const algorithms = benchmarkData.algorithmNames;
            const sizes = benchmarkData.sizes;
            
            if (algorithms.length === 0 || sizes.length === 0) return;
            
            const colors = [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0.8)',
                'rgba(255, 205, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)',
                'rgba(153, 102, 255, 0.8)',
                'rgba(255, 159, 64, 0.8)'
            ];

            // 时间对比图 (横向)
            const timeData = {
                labels: sizes.map(s => `n=${s}`),
                datasets: algorithms.map((algo, index) => ({
                    label: algo,
                    data: sizes.map(size => {
                        const data = benchmarkData.algorithms[algo][size];
                        return data ? data.nsPerOp / 1000 : 0; // 转换为 μs
                    }),
                    backgroundColor: colors[index % colors.length],
                    borderColor: colors[index % colors.length].replace('0.8', '1'),
                    borderWidth: 2
                }))
            };

            if (chartInstances.timeHorizontal) chartInstances.timeHorizontal.destroy();
            chartInstances.timeHorizontal = new Chart(document.getElementById('timeHorizontalChart'), {
                type: 'bar',
                data: timeData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: 'Time (μs/op)' }
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: '各算法在不同输入规模下的执行时间' }
                    }
                }
            });

            // 内存对比图 (横向)
            const memoryData = {
                labels: sizes.map(s => `n=${s}`),
                datasets: algorithms.map((algo, index) => ({
                    label: algo,
                    data: sizes.map(size => {
                        const data = benchmarkData.algorithms[algo][size];
                        return data ? data.bytesPerOp : 0;
                    }),
                    backgroundColor: colors[index % colors.length],
                    borderColor: colors[index % colors.length].replace('0.8', '1'),
                    borderWidth: 2
                }))
            };

            if (chartInstances.memoryHorizontal) chartInstances.memoryHorizontal.destroy();
            chartInstances.memoryHorizontal = new Chart(document.getElementById('memoryHorizontalChart'), {
                type: 'bar',
                data: memoryData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: 'Memory (B/op)' }
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: '各算法在不同输入规模下的内存使用' }
                    }
                }
            });
        }

        function createVerticalCharts() {
            const algorithms = benchmarkData.algorithmNames;
            const sizes = benchmarkData.sizes;
            
            if (algorithms.length === 0 || sizes.length === 0) return;
            
            const colors = [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0.8)',
                'rgba(255, 205, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)',
                'rgba(153, 102, 255, 0.8)'
            ];

            // 时间复杂度对比 (纵向 - 线图)
            const timeVerticalData = {
                labels: sizes.map(s => `n=${s}`),
                datasets: algorithms.map((algo, index) => ({
                    label: algo,
                    data: sizes.map(size => {
                        const data = benchmarkData.algorithms[algo][size];
                        return data ? data.nsPerOp / 1000 : null;
                    }),
                    borderColor: colors[index % colors.length].replace('0.8', '1'),
                    backgroundColor: colors[index % colors.length],
                    fill: false,
                    tension: 0.1
                }))
            };

            if (chartInstances.timeVertical) chartInstances.timeVertical.destroy();
            chartInstances.timeVertical = new Chart(document.getElementById('timeVerticalChart'), {
                type: 'line',
                data: timeVerticalData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            type: 'logarithmic',
                            title: { display: true, text: 'Time (μs/op) - Log Scale' }
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: '算法时间复杂度增长趋势' }
                    }
                }
            });

            // 内存效率对比 (纵向)
            const memVerticalData = {
                labels: sizes.map(s => `n=${s}`),
                datasets: algorithms.map((algo, index) => ({
                    label: algo,
                    data: sizes.map(size => {
                        const data = benchmarkData.algorithms[algo][size];
                        return data ? data.bytesPerOp : null;
                    }),
                    borderColor: colors[index % colors.length].replace('0.8', '1'),
                    backgroundColor: colors[index % colors.length],
                    fill: false,
                    tension: 0.1
                }))
            };

            if (chartInstances.memoryVertical) chartInstances.memoryVertical.destroy();
            chartInstances.memoryVertical = new Chart(document.getElementById('memoryVerticalChart'), {
                type: 'line',
                data: memVerticalData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: 'Memory (B/op)' }
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: '算法内存使用增长趋势' }
                    }
                }
            });
        }

        function createEfficiencyChart() {
            const algorithms = benchmarkData.algorithmNames;
            const sizes = benchmarkData.sizes;
            
            if (algorithms.length === 0 || sizes.length === 0) return;

            // 创建效率散点图 (时间 vs 内存)
            const scatterData = {
                datasets: algorithms.map((algo, index) => {
                    const color = `hsl(${index * 360 / algorithms.length}, 70%, 50%)`;
                    return {
                        label: algo,
                        data: sizes.map(size => {
                            const data = benchmarkData.algorithms[algo][size];
                            if (!data) return null;
                            return {
                                x: data.nsPerOp / 1000, // μs
                                y: data.bytesPerOp,
                                size: size
                            };
                        }).filter(d => d !== null),
                        backgroundColor: color + '80',
                        borderColor: color,
                        pointRadius: 8
                    };
                })
            };

            if (chartInstances.efficiency) chartInstances.efficiency.destroy();
            chartInstances.efficiency = new Chart(document.getElementById('efficiencyChart'), {
                type: 'scatter',
                data: scatterData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            title: { display: true, text: 'Time (μs/op)' },
                            type: 'logarithmic'
                        },
                        y: {
                            title: { display: true, text: 'Memory (B/op)' },
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: '算法效率矩阵 (左下角最优)' },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.dataset.label}: ${context.parsed.x.toFixed(1)}μs, ${context.parsed.y}B (n=${context.raw.size})`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function createScalabilityChart() {
            const algorithms = benchmarkData.algorithmNames;
            const sizes = benchmarkData.sizes;
            
            if (algorithms.length === 0 || sizes.length < 2) return;

            // 计算扩展性系数 (相对于最小输入的增长倍数)
            const scalabilityData = {
                labels: sizes.slice(1).map(s => `n=${s}`),
                datasets: algorithms.map((algo, index) => {
                    const baseData = benchmarkData.algorithms[algo][sizes[0]];
                    if (!baseData) return null;
                    
                    const color = `hsl(${index * 360 / algorithms.length}, 70%, 50%)`;
                    return {
                        label: algo,
                        data: sizes.slice(1).map(size => {
                            const data = benchmarkData.algorithms[algo][size];
                            if (!data || !baseData) return null;
                            return data.nsPerOp / baseData.nsPerOp; // 相对倍数
                        }),
                        borderColor: color,
                        backgroundColor: color + '20',
                        fill: false,
                        tension: 0.1
                    };
                }).filter(d => d !== null)
            };

            if (chartInstances.scalability) chartInstances.scalability.destroy();
            chartInstances.scalability = new Chart(document.getElementById('scalabilityChart'), {
                type: 'line',
                data: scalabilityData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            type: 'logarithmic',
                            title: { display: true, text: `相对于 n=${sizes[0]} 的增长倍数 (Log Scale)` }
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: '算法扩展性对比 (斜率越平缓越好)' }
                    }
                }
            });
        }

        function createTables() {
            const algorithms = benchmarkData.algorithmNames;
            const sizes = benchmarkData.sizes;
            
            if (algorithms.length === 0 || sizes.length === 0) return;

            // 创建时间表格
            createTable('timeTable', algorithms, sizes, 'nsPerOp', (val) => `${(val/1000).toFixed(2)} μs`);
            // 创建内存表格
            createTable('memoryTable', algorithms, sizes, 'bytesPerOp', (val) => `${val} B`);
            
            // 创建分配次数表格
            createTable('allocsTable', algorithms, sizes, 'allocsPerOp', (val) => `${val}`);
        }

        function createTable(tableId, algorithms, sizes, metric, formatter) {
            const table = document.getElementById(tableId);
            
            // 创建表头
            let headerRow = '<tr><th class="algorithm-name">Algorithm</th>';
            sizes.forEach(size => {
                headerRow += `<th>n=${size}</th>`;
            });
            headerRow += '</tr>';
            
            // 创建数据行
            let rows = '';
            algorithms.forEach(algo => {
                let row = `<tr><td class="algorithm-name">${algo}</td>`;
                
                // 收集该行的所有值以便找出最好和最差的
                const rowValues = sizes.map(size => {
                    const data = benchmarkData.algorithms[algo][size];
                    return data ? data[metric] : null;
                }).filter(v => v !== null);
                
                const minValue = Math.min(...rowValues);
                const maxValue = Math.max(...rowValues);
                
                sizes.forEach(size => {
                    const data = benchmarkData.algorithms[algo][size];
                    if (data && data[metric] !== undefined) {
                        const value = data[metric];
                        let cellClass = '';
                        
                        // 高亮最好和最差的值 (对于时间和内存，越小越好)
                        if (metric === 'nsPerOp' || metric === 'bytesPerOp' || metric === 'allocsPerOp') {
                            if (value === minValue && rowValues.length > 1) {
                                cellClass = 'best-value';
                            } else if (value === maxValue && rowValues.length > 1 && minValue !== maxValue) {
                                cellClass = 'worst-value';
                            }
                        }
                        
                        row += `<td class="${cellClass}">${formatter(value)}</td>`;
                    } else {
                        row += '<td>-</td>';
                    }
                });
                row += '</tr>';
                rows += row;
            });
            
            table.innerHTML = `
                <thead>${headerRow}</thead>
                <tbody>${rows}</tbody>
            `;
        }

        // 页面加载时执行
        window.addEventListener('load', loadData);
    </script>
</body>
</html>

            
